import React, { useState, useEffect } from "react";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { message, Modal } from "antd";
import { useHistory, useParams } from "react-router-dom";
import ArticleDetailCom from "../../../components/ArticleDetailCom";
import PageSettingCom from "../../../components/PageSettingCom";
import api from "../../../api/index";
const PageDetail = () => {
  window.addEventListener("popstate", function () {
    window.location.href = "/page";
  });
  const history = useHistory();
  const params = useParams();
  const [detailInfo, setDetailInfo] = useState({});
  const [OssFileVisible, setOssFileVisible] = useState(false);
  const [SettingVisible, setSettingVisible] = useState(false);
  useEffect(() => {
    init();
  }, []);
  const init = () => {
    getPageDetail();
  };
  const getPageDetail = async () => {
    const res = await api.getPageDetail(params.id);
    setDetailInfo({ ...res.data });
  };
  //打开setting弹框
  const openSettingVisible = () => {
    setSettingVisible(true);
  };
  //关闭setting弹框
  const closeSettingVisible = () => {
    setSettingVisible(false);
  };
  //打开oss抽屉弹框
  const openOssFileVisible = () => {
    setOssFileVisible(true);
  };
  //关闭oss抽屉弹框
  const closeOssFileVisible = () => {
    setOssFileVisible(false);
  };
  const handlerDetailInfo = (value, type) => {
    detailInfo[type] = value;
    setDetailInfo({ ...detailInfo });
  };
  //删除
  const delPageList = async () => {
    const res = await api.delPage({ id: detailInfo.id });
    if (res.success) {
      message.success("删除成功");
      history.push("/page");
    }
  };
  //是否确认删除
  const isExecuteHandlerDelClick = () => {
    Modal.confirm({
      title: "确认删除？",
      icon: <ExclamationCircleOutlined />,
      content: "删除内容后，无法恢复。",
      cancelText: "取消",
      okText: "确认",
      onOk() {
        delPageList();
      },
    });
  };
  //保存草稿
  const savePageDrafts = async () => {
    if (!detailInfo.pathUrl) {
      message.warning("请输入页面路径");
      openSettingVisible();
    } else {
      await updateDataInfo();
      await api.batchDftPage({ batchList: [{ id: detailInfo.id }] });
      message.success("页面已保存为草稿");
    }
  };
  //发布
  const publicPage = async () => {
    if (!detailInfo.pathUrl) {
      message.warning("请输入页面路径");
      openSettingVisible();
    } else {
      await updateDataInfo();
      await api.batchPubPage({ batchList: [{ id: detailInfo.id }] });
      message.success("页面已更新");
    }
  };
  //更新数据
  const updateDataInfo = async () => {
    await api.editPage({ ...detailInfo });
  };
  const messageFn = () => {
    if (!detailInfo.title) {
      message.warning("请输入页面名称");
    }
  };
  return (
    <div className="article-detail">
      <ArticleDetailCom
        titleText="页面属性" //一级抽屉title
        editorRtValue={detailInfo?.content} //markdown绑定的value
        editorChange={(e) => handlerDetailInfo(e, "content")} //markdown value值onChange事件
        editorStyle={{ height: 650 }} //markdown 样式
        headerValue={detailInfo?.title}
        handlerId={detailInfo?.id}
        OssFileVisible={OssFileVisible}
        SettingVisible={SettingVisible}
        openSettingVisible={openSettingVisible}
        closeSettingVisible={closeSettingVisible}
        openOssFileVisible={openOssFileVisible}
        closeOssFileVisible={closeOssFileVisible}
        handlerDataInfo={handlerDetailInfo}
        handlerPublicBtn={publicPage} //发布按钮事件
        handlerDraftsBtn={savePageDrafts} //保存草稿按钮
        isExecuteHandlerDelClick={isExecuteHandlerDelClick} //确认删除
        messageFn={messageFn}
      >
        <PageSettingCom
          handlerInfo={detailInfo}
          handlerDataInfo={handlerDetailInfo}
          closeSettingVisible={closeSettingVisible}
          openOssFileVisible={openOssFileVisible}
        ></PageSettingCom>
      </ArticleDetailCom>
    </div>
  );
};

export default PageDetail;
